<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="40%"
    title="查看"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['xingyun:basedata:query']" v-loading="loading">
      <a-divider>基本信息</a-divider>
      <a-descriptions :column="4" :label-style="{ width: '100px' }" bordered>
        <a-descriptions-item label="卡券类型" :span="2">
          {{ $enums.COUPON_TYPE.getDesc(formData.couponType) }}
        </a-descriptions-item>
        <a-descriptions-item label="发放方式" :span="2">
          {{
            $enums.SEND_WAY.values()
              .filter((item) => item.code === formData.sendWay)
              .map((item) => item.desc)
              .join(',')
          }}
        </a-descriptions-item>
        <a-descriptions-item label="卡券名称" :span="4">
          {{ formData.couponName }}
        </a-descriptions-item>
        <a-descriptions-item label="卡券面值" :span="2">
          {{ formatAmount(formData.parValue) }}
        </a-descriptions-item>
        <a-descriptions-item label="售价" :span="2">
          {{ formatAmount(formData.price) }}
        </a-descriptions-item>
        <a-descriptions-item label="增值比例" :span="2" v-if="formData.couponType === 2">
          {{ formatPercentage(formData.added) }}
        </a-descriptions-item>
        <a-descriptions-item label="增值金额" :span="2" v-if="formData.couponType === 2">
          {{ formatAmount((formData.added / 100) * formData.parValue) }}
        </a-descriptions-item>
        <a-descriptions-item label="最终面值" :span="4" v-if="formData.couponType === 2">
          {{ formatAmount((formData.added / 100) * formData.parValue + formData.parValue) }}
        </a-descriptions-item>
        <a-descriptions-item label="有效天数" :span="2">
          {{ formatDay(formData.effectiveDay) }}
        </a-descriptions-item>
        <a-descriptions-item label="状态" :span="2">
          <available-tag :available="formData.available" />
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="4">
          {{ formData.description }}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider>适用配置</a-divider>
      <a-descriptions :column="4" :label-style="{ width: '100px' }" bordered>
        <a-descriptions-item label="使用条件" :span="4">
          {{ formData.useCondition === 0 ? '无限制' : formatAmount(formData.useCondition) }}
        </a-descriptions-item>
        <a-descriptions-item label="适用商品" :span="4">
          {{
            formData.productAll
              ? '所有商品'
              : formData.products.map((item) => item.productName).join('、')
          }}
        </a-descriptions-item>
        <a-descriptions-item label="适用门店" :span="4">
          {{
            formData.stopAll ? '所有门店' : formData.stops.map((item) => item.stopName).join('、')
          }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </a-modal>
</template>
<script>
  import { defineComponent } from 'vue';
  import * as api from '@/api/base-data/coupon';

  export default defineComponent({
    // 使用组件
    components: {},
    props: {
      id: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // 是否可见
        visible: false,
        // 是否显示加载框
        loading: false,
        // 表单数据
        formData: {},
      };
    },
    created() {
      this.initFormData();
    },
    methods: {
      // 打开对话框 由父页面触发
      openDialog() {
        this.visible = true;

        this.$nextTick(() => this.open());
      },
      // 关闭对话框
      closeDialog() {
        this.visible = false;
        this.$emit('close');
      },
      // 初始化表单数据
      initFormData() {
        this.formData = {
          couponType: 1,
          couponName: '',
          sendWay: 1,
          effectiveDay: 30,
          available: true,
          description: '',
          parValue: null,
          added: 0,
          useCondition: 0,
          price: '',
          stopAll: true,
          shopIds: [],
          productAll: true,
          productIds: [],
          products: [],
        };
      },
      // 页面显示时触发
      open() {
        // 初始化数据
        this.initFormData();

        // 查询数据
        this.loadFormData();
      },
      // 查询数据
      loadFormData() {
        this.loading = true;
        api
          .get(this.id)
          .then((data) => {
            this.formData = data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      // 格式化金额
      formatAmount(value) {
        return '￥ ' + Number.parseFloat(value || 0).toFixed(2);
      },
      // 格式化百分比
      formatPercentage(value) {
        return Number.parseFloat(value || 0).toFixed(2) + ' %';
      },
      // 格式化日
      formatDay(value) {
        let day = Number.parseFloat(value || 0);
        return day ? day + ' 天' : '永久';
      },
      // 格式化条件
      formatCondition(value) {
        let condition = Number.parseFloat(value || 0);
        return condition ? '￥ ' + condition : '无限制';
      },
    },
  });
</script>
